<template>
  <view>
    <view class="title">
      <view class="item" @click="showDrawer">全部课程</view>
      <view class="item">
        <uni-data-select v-model="type" :localdata="range" :clear="false"></uni-data-select>
      </view>
    </view>
    <view class="list">
      <list-item v-for="(v, i) in list" :key="i" :v="v"></list-item>
    </view>
    <uni-drawer ref="showRight" mode="left" :mask-click="false">
      <scroll-view style="height: 100%;" scroll-y="true">
        <button @click="closeDrawer" type="primary">关闭Drawer</button>
        <view class="" v-for="(v, i) in menus" :key="i">{{ v.name }}</view>
      </scroll-view>
    </uni-drawer>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getMenus()
    },
    watch: {
      type: {
        handler() {
          this.getList()
        },
        immediate: true
      }
    },
    data() {
      return {
        menus: [],
        list: [],
        type: '全部',
        range: [{
          value: '全部',
          text: "全部"
        }, {
          value: '即将开课',
          text: "即将开课"
        }, {
          value: '开课中',
          text: "开课中"
        }, {
          value: '已结课',
          text: "已结课"
        }, ],
      };
    },
    methods: {
      showDrawer() {
        this.$refs.showRight.open();
      },
      closeDrawer() {
        this.$refs.showRight.close();
      },
      async getList() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/list',
          data: {
            type_like: this.type === '全部' ? '' : this.type
          }
        })
        this.list = resp.data
        console.log(resp.data)
      },
      async getMenus() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/menus',
        })
        this.menus = resp.data
      }
    }
  }
</script>

<style lang="scss">
  .list {
    display: flex;
    flex-wrap: wrap;
  }

  .title {
    display: flex;
    height: 60px;
    align-items: center;

    .item {
      flex: 1;
    }
  }
</style>
